import React, { memo } from "react";
import MyNavbar from "../component/MyNavbar";
import { useSelector, useDispatch } from "react-redux";
import { ProductCard, Stepper, SubmitBar } from "react-vant";
import { addOne, delOne } from "../dea/shop";
const My = memo(() => {
  let cars = useSelector((state) => state.shop.cars);
  let dispatch = useDispatch();
  let sumPrice = cars.reduce((item, cur) => {
    item += cur.num * cur.price;
    return item;
  }, 0);
  if (cars[0] === undefined) {
    return (
      <div>
        <MyNavbar></MyNavbar>
        <div>购物车为空,快去选购商品吧~</div>
      </div>
    );
  } else {
    return (
      <div>
        <MyNavbar></MyNavbar>
        <div>
          {cars.map((item) => {
            return (
              <ProductCard
                key={item.id}
                price={item.price}
                title={item.title}
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                footer={
                  <>
                    <Stepper
                      theme="round"
                      buttonSize="22"
                      disableInput
                      value={item.num}
                      onChange={(val) =>
                        item.num < val
                          ? dispatch(addOne(item.id))
                          : dispatch(delOne(item.id))
                      }
                    />
                  </>
                }
              />
            );
          })}
        </div>
        <div className="demo-submit-bar">
          <SubmitBar price={sumPrice*100} buttonText="提交订单" />
        </div>
      </div>
    );
  }
});

export default My;
